<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clock UI Reference - Landscape</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&family=Anton&family=Roboto+Condensed:wght@300;400;700;900&display=swap');
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Oswald', 'Roboto Condensed', sans-serif;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #000;
        }
        
        .clock-container {
            width: 480px;
            height: 320px;
            position: relative;
            background: linear-gradient(135deg, 
                #7DD3C0 0%,
                #6BC4B3 18.75%,
                #F8F8F8 18.75%,
                #F0F0F0 50%,
                #E8E8E8 81.25%,
                #4A90E2 81.25%,
                #3A7BD5 100%);
            display: flex;
            flex-direction: column;
            color: white;
            font-weight: 600;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 
                0 20px 40px rgba(0,0,0,0.15),
                0 10px 20px rgba(0,0,0,0.1),
                inset 0 1px 0 rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            animation: breathe 4s ease-in-out infinite;
        }
        
        /* Header Section - Top */
        .header {
            height: 60px;
            background: linear-gradient(135deg, #7DD3C0 0%, #6BC4B3 100%);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 25px;
            font-size: 28px;
            font-weight: 700;
            font-family: 'Anton', 'Oswald', sans-serif;
            letter-spacing: 1px;
            color: #1F2937;
            text-shadow: 0 1px 2px rgba(255,255,255,0.3);
            position: relative;
            z-index: 2;
            border-bottom: 1px solid rgba(255,255,255,0.2);
        }
        
        .header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 100%;
            background: linear-gradient(180deg, 
                rgba(255,255,255,0.1) 0%, 
                transparent 50%,
                rgba(0,0,0,0.05) 100%);
            pointer-events: none;
        }
        
        .header-left {
            flex: 1;
            text-align: left;
            font-size: 32px;
            font-weight: 400;
            font-family: 'Anton', sans-serif;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }
        
        .header-left:hover {
            transform: translateY(-1px);
        }
        
        .header-center {
            flex: 2;
            text-align: center;
            font-size: 28px;
            font-weight: 700;
            font-family: 'Oswald', sans-serif;
            letter-spacing: 3px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }
        
        .header-center:hover {
            transform: translateY(-1px);
        }
        
        .header-right {
            flex: 1;
            text-align: right;
            font-size: 32px;
            font-weight: 400;
            font-family: 'Anton', sans-serif;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }
        
        .header-right:hover {
            transform: translateY(-1px);
        }
        
        /* Main Content - Middle */
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 15px;
            position: relative;
            background: linear-gradient(135deg, 
                #F8F8F8 0%, 
                #F0F0F0 50%, 
                #E8E8E8 100%);
            border-top: 1px solid rgba(255,255,255,0.5);
            border-bottom: 1px solid rgba(0,0,0,0.1);
        }
        
        .main-content::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at center, 
                rgba(255,255,255,0.1) 0%, 
                transparent 70%);
            pointer-events: none;
        }
        
        .time-display {
            font-size: 80px;
            font-weight: 400;
            font-family: 'Anton', monospace;
            color: #E74C3C;
            text-shadow: 
                0 4px 8px rgba(231, 76, 60, 0.3),
                0 2px 4px rgba(0,0,0,0.1);
            letter-spacing: 2px;
            line-height: 0.9;
            position: relative;
            overflow: visible;
            transition: all 0.3s ease;
            filter: drop-shadow(0 4px 8px rgba(231, 76, 60, 0.2));
            animation: glow 3s ease-in-out infinite;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .time-display:hover {
            transform: scale(1.02);
        }
        
        /* 数字滚动动画容器 */
        .digit-container {
            display: inline-block;
            position: relative;
            overflow: hidden;
            height: 1em;
            vertical-align: top;
            width: 0.7em;
            margin: 0 0.02em;
        }
        
        .digit-strip {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            display: flex;
            flex-direction: column;
        }
        
        .digit {
            height: 1em;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 400;
            font-family: 'Anton', monospace;
            color: #E74C3C;
            text-shadow: 
                0 2px 4px rgba(231, 76, 60, 0.3),
                0 1px 2px rgba(0,0,0,0.1);
        }
        
        /* 静态字符（冒号等） */
        .static-char {
            display: inline-block;
            margin: 0 0.1em;
            opacity: 1;
        }
        
        /* 数字变化时的特效 */
        .digit-container.changing {
            transform: scale(1.05);
        }
        
        .digit-strip.rolling {
            transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }
        
        /* 温度数字动画 */
        .temp-section {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 8px;
            min-width: 80px;
            transition: all 0.3s ease;
        }
        
        .temp-section:hover {
            transform: translateY(-2px);
        }
        
        .temp-icon {
            font-size: 20px;
            color: #FFFFFF;
            filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
        }
        
        .temp-value {
            font-size: 28px;
            font-weight: 900;
            font-family: 'Anton', sans-serif;
            color: #FFFFFF;
            line-height: 1;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
        }
        
        .day-section {
            font-size: 22px;
            font-weight: 900;
            font-family: 'Oswald', sans-serif;
            letter-spacing: 2px;
            text-transform: uppercase;
            flex: 1;
            text-align: center;
            color: #FFFFFF;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
            padding: 8px;
            transition: all 0.3s ease;
        }
        
        .day-section:hover {
            transform: translateY(-1px);
        }
        
        .humidity-section {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 8px;
            min-width: 100px;
            justify-content: flex-end;
            transition: all 0.3s ease;
        }
        
        .humidity-section:hover {
            transform: translateY(-2px);
        }
        
        .humidity-icon {
            font-size: 18px;
            color: #FFFFFF;
            filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
        }
        
        .humidity-content {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 2px;
        }
        
        .humidity-text {
            font-size: 12px;
            font-weight: 700;
            font-family: 'Oswald', sans-serif;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: #FFFFFF;
            text-shadow: 0 1px 2px rgba(0,0,0,0.2);
        }
        
        .humidity-value {
            font-size: 28px;
            font-weight: 900;
            font-family: 'Anton', sans-serif;
            color: #FFFFFF;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
        }
        
        /* Bottom Status Bar */
        .status-bar {
            height: 60px;
            background: linear-gradient(135deg, #4A90E2 0%, #3A7BD5 100%);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 25px;
            position: relative;
            z-index: 2;
            border-top: 1px solid rgba(255,255,255,0.2);
        }
        
        .status-bar::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 100%;
            background: linear-gradient(180deg, 
                rgba(255,255,255,0.1) 0%, 
                transparent 50%,
                rgba(0,0,0,0.05) 100%);
            pointer-events: none;
        }
        
        /* Icons using CSS */
        .icon-clock::before {
            content: "⏰";
            font-size: 24px;
        }
        
        .icon-temp::before {
            content: "🌡️";
            font-size: 18px;
            display: inline-block;
            transform: rotate(15deg);
        }
        
        .icon-humidity::before {
            content: "💧";
            font-size: 16px;
        }
        
        /* Responsive adjustments */
        @media (max-width: 500px) {
            .clock-container {
                width: 100vw;
                height: 100vh;
                border-radius: 0;
            }
        }
        
        /* Animation for time update */
        .time-display {
            transition: transform 0.1s ease;
        }
        
        .time-display:hover {
            transform: scale(1.02);
        }
        
        /* 整体容器的呼吸效果 */
        @keyframes breathe {
            0%, 100% { 
                box-shadow: 
                    0 20px 40px rgba(0,0,0,0.15),
                    0 10px 20px rgba(0,0,0,0.1),
                    inset 0 1px 0 rgba(255,255,255,0.1);
            }
            50% { 
                box-shadow: 
                    0 25px 50px rgba(0,0,0,0.2),
                    0 15px 30px rgba(0,0,0,0.15),
                    inset 0 1px 0 rgba(255,255,255,0.15);
            }
        }
        
        /* 时间数字的发光效果 */
        @keyframes glow {
            0%, 100% {
                text-shadow: 
                    0 4px 8px rgba(231, 76, 60, 0.3),
                    0 2px 4px rgba(0,0,0,0.1);
            }
            50% {
                text-shadow: 
                    0 4px 8px rgba(231, 76, 60, 0.5),
                    0 2px 4px rgba(0,0,0,0.15),
                    0 0 20px rgba(231, 76, 60, 0.2);
            }
        }
        
        /* 添加光晕边框效果 */
        .clock-container::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, 
                #7DD3C0, #4A90E2, #E74C3C, #7DD3C0);
            border-radius: 10px;
            z-index: -1;
            opacity: 0.3;
            filter: blur(4px);
        }
        
        /* Enhanced visual effects */
        .header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(to right, 
                transparent, 
                rgba(255,255,255,0.4), 
                transparent);
        }
        
        .status-bar::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(to right, 
                transparent, 
                rgba(255,255,255,0.3), 
                transparent);
        }
        
        .evening-section {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .evening-text {
            font-size: 22px;
            font-weight: 700;
            font-family: 'Oswald', sans-serif;
            color: #E74C3C;
            letter-spacing: 4px;
            text-transform: uppercase;
            text-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }
        
        .time-container {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .seconds-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            position: relative;
        }
        
        .seconds-digits {
            display: flex;
            align-items: center;
        }
        
        .clock-icon {
            width: 24px;
            height: 24px;
            color: #E74C3C;
            font-size: 20px;
            filter: drop-shadow(0 2px 4px rgba(231, 76, 60, 0.3));
            animation: pulse 2s infinite;
            position: absolute;
            top: -35px;
            left: 25%;
            transform: translateX(-50%);
            z-index: 10;
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }
    </style>
</head>
<body>
    <div class="clock-container">
        <!-- Header - Top Section -->
        <div class="header">
            <div class="header-left">
                <span id="year-display">21</span>
            </div>
            <div class="header-center">
                <span id="month-display">OCTOBER</span>
            </div>
            <div class="header-right">
                <span id="date-display">2024</span>
            </div>
        </div>
        
        <!-- Main Content - Middle Section -->
        <div class="main-content">
            <div class="evening-section">
                <span class="evening-text" id="period-display">MORNING</span>
            </div>
            
            <div class="time-container">
                <div class="time-display" id="time-display">
                    <div class="digit-container">
                        <div class="digit-strip" id="hour-tens">
                            <div class="digit">0</div><div class="digit">1</div><div class="digit">2</div><div class="digit">0</div><div class="digit">1</div><div class="digit">2</div><div class="digit">0</div><div class="digit">1</div><div class="digit">2</div>
                        </div>
                    </div>
                    <div class="digit-container">
                        <div class="digit-strip" id="hour-ones">
                            <div class="digit">0</div><div class="digit">1</div><div class="digit">2</div><div class="digit">3</div><div class="digit">4</div><div class="digit">5</div><div class="digit">6</div><div class="digit">7</div><div class="digit">8</div><div class="digit">9</div>
                            <div class="digit">0</div><div class="digit">1</div><div class="digit">2</div><div class="digit">3</div><div class="digit">4</div><div class="digit">5</div><div class="digit">6</div><div class="digit">7</div><div class="digit">8</div><div class="digit">9</div>
                            <div class="digit">0</div><div class="digit">1</div><div class="digit">2</div><div class="digit">3</div><div class="digit">4</div><div class="digit">5</div><div class="digit">6</div><div class="digit">7</div><div class="digit">8</div><div class="digit">9</div>
                        </div>
                    </div>
                    <span class="static-char">:</span>
                    <div class="digit-container">
                        <div class="digit-strip" id="minute-tens">
                            <div class="digit">0</div><div class="digit">1</div><div class="digit">2</div><div class="digit">3</div><div class="digit">4</div><div class="digit">5</div>
                            <div class="digit">0</div><div class="digit">1</div><div class="digit">2</div><div class="digit">3</div><div class="digit">4</div><div class="digit">5</div>
                            <div class="digit">0</div><div class="digit">1</div><div class="digit">2</div><div class="digit">3</div><div class="digit">4</div><div class="digit">5</div>
                        </div>
                    </div>
                    <div class="digit-container">
                        <div class="digit-strip" id="minute-ones">
                            <div class="digit">0</div><div class="digit">1</div><div class="digit">2</div><div class="digit">3</div><div class="digit">4</div><div class="digit">5</div><div class="digit">6</div><div class="digit">7</div><div class="digit">8</div><div class="digit">9</div>
                            <div class="digit">0</div><div class="digit">1</div><div class="digit">2</div><div class="digit">3</div><div class="digit">4</div><div class="digit">5</div><div class="digit">6</div><div class="digit">7</div><div class="digit">8</div><div class="digit">9</div>
                            <div class="digit">0</div><div class="digit">1</div><div class="digit">2</div><div class="digit">3</div><div class="digit">4</div><div class="digit">5</div><div class="digit">6</div><div class="digit">7</div><div class="digit">8</div><div class="digit">9</div>
                        </div>
                    </div>
                    <span class="static-char">:</span>
                    <div class="seconds-section">
                        <div class="clock-icon icon-clock"></div>
                        <div class="seconds-digits">
                            <div class="digit-container">
                                <div class="digit-strip" id="second-tens">
                                    <div class="digit">0</div><div class="digit">1</div><div class="digit">2</div><div class="digit">3</div><div class="digit">4</div><div class="digit">5</div>
                                    <div class="digit">0</div><div class="digit">1</div><div class="digit">2</div><div class="digit">3</div><div class="digit">4</div><div class="digit">5</div>
                                    <div class="digit">0</div><div class="digit">1</div><div class="digit">2</div><div class="digit">3</div><div class="digit">4</div><div class="digit">5</div>
                                </div>
                            </div>
                            <div class="digit-container">
                                <div class="digit-strip" id="second-ones">
                                    <div class="digit">0</div><div class="digit">1</div><div class="digit">2</div><div class="digit">3</div><div class="digit">4</div><div class="digit">5</div><div class="digit">6</div><div class="digit">7</div><div class="digit">8</div><div class="digit">9</div>
                                    <div class="digit">0</div><div class="digit">1</div><div class="digit">2</div><div class="digit">3</div><div class="digit">4</div><div class="digit">5</div><div class="digit">6</div><div class="digit">7</div><div class="digit">8</div><div class="digit">9</div>
                                    <div class="digit">0</div><div class="digit">1</div><div class="digit">2</div><div class="digit">3</div><div class="digit">4</div><div class="digit">5</div><div class="digit">6</div><div class="digit">7</div><div class="digit">8</div><div class="digit">9</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Status Bar - Bottom Section -->
        <div class="status-bar">
            <!-- Temperature Section -->
            <div class="temp-section">
                <div class="temp-icon icon-temp"></div>
                <div class="temp-value">23.6°C</div>
            </div>
            
            <!-- Day Section -->
            <div class="day-section" id="day-display">
                DONNERSTAG
            </div>
            
            <!-- Humidity Section -->
            <div class="humidity-section">
                <div class="humidity-icon icon-humidity"></div>
                <div class="humidity-content">
                    <div class="humidity-text">HUMIDITY</div>
                    <div class="humidity-value">60%</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        let virtualPositions = {
            hourTens: 0,
            hourOnes: 0,
            minuteTens: 0,
            minuteOnes: 0,
            secondTens: 0,
            secondOnes: 0
        };
        
        let previousValues = {
            hourTens: -1,
            hourOnes: -1,
            minuteTens: -1,
            minuteOnes: -1,
            secondTens: -1,
            secondOnes: -1
        };
        
        function setDigitValue(elementId, value, previousValue, digitType) {
            if (value !== previousValue && previousValue !== -1) {
                const strip = document.getElementById(elementId);
                const container = strip.parentElement;
                
                // 获取当前虚拟位置
                let virtualPos = virtualPositions[digitType];
                
                // 计算最大值（小时十位最大为2，分钟和秒十位最大为5，个位最大为9）
                let maxValue;
                if (elementId.includes('hour-tens')) {
                    maxValue = 2;
                } else if (elementId.includes('-tens')) {
                    maxValue = 5;
                } else {
                    maxValue = 9;
                }
                
                // 如果是从最大值回到0，继续向上滚动
                if (previousValue === maxValue && value === 0) {
                    virtualPos += 1;
                } else if (value > previousValue) {
                    // 正常递增
                    virtualPos += (value - previousValue);
                } else if (value < previousValue) {
                    // 处理其他情况的跳跃（比如手动调整时间）
                    virtualPos += (maxValue + 1 - previousValue + value);
                }
                
                // 更新虚拟位置
                virtualPositions[digitType] = virtualPos;
                
                // 添加变化特效
                container.classList.add('changing');
                strip.classList.add('rolling');
                
                // 计算实际位移（基于虚拟位置）
                const actualPosition = virtualPos % (maxValue + 1);
                const displayPosition = virtualPos;
                
                strip.style.transform = `translateY(-${displayPosition}em)`;
                
                // 移除特效类
                setTimeout(() => {
                    container.classList.remove('changing');
                    strip.classList.remove('rolling');
                }, 800);
                
                // 重置位置以避免累积过多（保持在合理范围内）
                if (virtualPos > (maxValue + 1) * 2) {
                    setTimeout(() => {
                        // 在动画完成后重置到等效位置
                        strip.style.transition = 'none';
                        virtualPositions[digitType] = actualPosition + (maxValue + 1);
                        strip.style.transform = `translateY(-${virtualPositions[digitType]}em)`;
                        setTimeout(() => {
                            strip.style.transition = '';
                        }, 50);
                    }, 850);
                }
                
                return true;
            }
            return false;
        }
        
        function updateTimeWithAnimation() {
            const now = new Date();
            
            // 计算当前各个数字
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            const seconds = now.getSeconds().toString().padStart(2, '0');
            
            const currentValues = {
                hourTens: parseInt(hours[0]),
                hourOnes: parseInt(hours[1]),
                minuteTens: parseInt(minutes[0]),
                minuteOnes: parseInt(minutes[1]),
                secondTens: parseInt(seconds[0]),
                secondOnes: parseInt(seconds[1])
            };
            
            // 更新各个数字
            if (setDigitValue('hour-tens', currentValues.hourTens, previousValues.hourTens, 'hourTens')) {
                previousValues.hourTens = currentValues.hourTens;
            }
            
            if (setDigitValue('hour-ones', currentValues.hourOnes, previousValues.hourOnes, 'hourOnes')) {
                previousValues.hourOnes = currentValues.hourOnes;
            }
            
            if (setDigitValue('minute-tens', currentValues.minuteTens, previousValues.minuteTens, 'minuteTens')) {
                previousValues.minuteTens = currentValues.minuteTens;
            }
            
            if (setDigitValue('minute-ones', currentValues.minuteOnes, previousValues.minuteOnes, 'minuteOnes')) {
                previousValues.minuteOnes = currentValues.minuteOnes;
            }
            
            if (setDigitValue('second-tens', currentValues.secondTens, previousValues.secondTens, 'secondTens')) {
                previousValues.secondTens = currentValues.secondTens;
            }
            
            if (setDigitValue('second-ones', currentValues.secondOnes, previousValues.secondOnes, 'secondOnes')) {
                previousValues.secondOnes = currentValues.secondOnes;
            }
            
            // 更新日期组件（这些不需要动画）
            const months = [
                'JANUARY', 'FEBRUARY', 'MARCH', 'APRIL', 'MAY', 'JUNE',
                'JULY', 'AUGUST', 'SEPTEMBER', 'OCTOBER', 'NOVEMBER', 'DECEMBER'
            ];
            
            document.getElementById('year-display').textContent = now.getDate();
            document.getElementById('month-display').textContent = months[now.getMonth()];
            document.getElementById('date-display').textContent = now.getFullYear();
            
            // 更新星期
            const days = [
                'SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 
                'THURSDAY', 'FRIDAY', 'SATURDAY'
            ];
            document.getElementById('day-display').textContent = days[now.getDay()];
            
            // 更新时段
            const hour = now.getHours();
            let period = 'EVENING';
            if (hour >= 5 && hour < 12) {
                period = 'MORNING';
            } else if (hour >= 12 && hour < 17) {
                period = 'AFTERNOON';
            } else if (hour >= 17 && hour < 21) {
                period = 'EVENING';
            } else {
                period = 'NIGHT';
            }
            
            document.getElementById('period-display').textContent = period;
        }
        
        // 初始化：先设置初始值和虚拟位置
        function initializeTime() {
            const now = new Date();
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            const seconds = now.getSeconds().toString().padStart(2, '0');
            
            // 初始化虚拟位置（从第二组数字开始显示，这样有向上滚动的空间）
            const hourTensMax = 2, hourOnesMax = 9, minuteTensMax = 5, minuteOnesMax = 9, secondTensMax = 5, secondOnesMax = 9;
            
            virtualPositions.hourTens = parseInt(hours[0]) + (hourTensMax + 1);
            virtualPositions.hourOnes = parseInt(hours[1]) + (hourOnesMax + 1);
            virtualPositions.minuteTens = parseInt(minutes[0]) + (minuteTensMax + 1);
            virtualPositions.minuteOnes = parseInt(minutes[1]) + (minuteOnesMax + 1);
            virtualPositions.secondTens = parseInt(seconds[0]) + (secondTensMax + 1);
            virtualPositions.secondOnes = parseInt(seconds[1]) + (secondOnesMax + 1);
            
            // 直接设置初始位置
            document.getElementById('hour-tens').style.transform = `translateY(-${virtualPositions.hourTens}em)`;
            document.getElementById('hour-ones').style.transform = `translateY(-${virtualPositions.hourOnes}em)`;
            document.getElementById('minute-tens').style.transform = `translateY(-${virtualPositions.minuteTens}em)`;
            document.getElementById('minute-ones').style.transform = `translateY(-${virtualPositions.minuteOnes}em)`;
            document.getElementById('second-tens').style.transform = `translateY(-${virtualPositions.secondTens}em)`;
            document.getElementById('second-ones').style.transform = `translateY(-${virtualPositions.secondOnes}em)`;
            
            // 设置初始值
            previousValues = {
                hourTens: parseInt(hours[0]),
                hourOnes: parseInt(hours[1]),
                minuteTens: parseInt(minutes[0]),
                minuteOnes: parseInt(minutes[1]),
                secondTens: parseInt(seconds[0]),
                secondOnes: parseInt(seconds[1])
            };
            
            // 更新其他显示内容
            updateTimeWithAnimation();
        }
        
        // 初始化时间显示
        initializeTime();
        
        // 每秒更新
        setInterval(updateTimeWithAnimation, 1000);
        
        // 添加交互效果
        document.addEventListener('DOMContentLoaded', function() {
            // 为数字容器添加点击效果
            const digitContainers = document.querySelectorAll('.digit-container');
            digitContainers.forEach(container => {
                container.addEventListener('click', function() {
                    this.style.transform = 'scale(1.1)';
                    setTimeout(() => {
                        this.style.transform = '';
                    }, 200);
                });
            });
            
            // 每分钟的脉冲效果
            setInterval(() => {
                const timeDisplay = document.querySelector('.time-display');
                timeDisplay.style.transform = 'scale(1.02)';
                setTimeout(() => {
                    timeDisplay.style.transform = 'scale(1)';
                }, 300);
            }, 60000);
        });
    </script>
</body>
</html> 